import React, {forwardRef, useImperativeHandle, useState, useEffect} from 'react';
import {
  Modal,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import { pxToDp } from '@/utils/stylesKits';
//下拉组件
import DatePicker from 'react-native-date-picker';

const PickerDateComponent = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const [options, setOptions] = useState({
    date: '', //回显日期
    mode: 'date', //date:年月日；datetime：年月日时分；time：时分
  });
  const [tempValue, setTempValue] = useState('');
  const hide = value => {
    setVisible(false);
    options.success(value);
  };
  const show = params => {
    const date = params.date? params.date: getCurrentTime(params.mode ? params.mode : 'date');
    setOptions({
      mode: params.mode ? params.mode : 'date', //类型
      date: date, //当前日期
      success: params.success,
    });
    setTempValue(date);
    setVisible(true);
  };
  //点击取消
  const cancelHandle = () => {
    hide(options.date);
  };
  //点击确认
  const confirmHandle = () => {
    hide(tempValue);
  };
  //选择日期
  const dateChangeHandle = value => {
    const beijingTime = convertToBeijingTime(options.mode, value);
    setTempValue(beijingTime);
  };

  const convertToBeijingTime = (mode, date) => {
    const beijingDateTime = new Date(date.getTime());
    return isoToCustomFormat(mode, beijingDateTime.toISOString()); // 转换为ISO字符串表示
  };
  const isoToCustomFormat = (mode, isoString) => {
    const date = new Date(isoString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    if (mode === 'datetime') {
      const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:00`;
      return formattedTime;
    } else if (mode === 'time') {
      const formattedTime = `${hours}:${minutes}`;
      return formattedTime;
    } else {
      const formattedTime = `${year}-${month}-${day}`;
      return formattedTime;
    }
  };

  //获取当前时间
  const getCurrentTime = mode => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    if (mode === 'datetime') {
      const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return currentTime;
    } else if (mode === 'time') {
      const currentTime = ` ${hours}:${minutes}`;
      return currentTime;
    } else {
      const currentTime = `${year}-${month}-${day}`;
      return currentTime;
    }
  };

  useImperativeHandle(ref, () => ({
    show,
  }));
  return (
    <>
      <Modal visible={visible} animationType="fade" transparent>
        <View style={styles.pickerWrap}>
          <View style={styles.pickerBlock}>
            <View style={{height: pxToDp(12)}}></View>
            <View style={styles.pickerContent}>
              {/* 头部 */}
              <View style={styles.pickerHeader}>
                <View style={styles.cancelBtn}>
                  <TouchableOpacity onPress={cancelHandle}>
                    <Text style={styles.cancelText}>取消</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.timeValue}>
                  <Text style={styles.date}>
                    {tempValue ? tempValue : getCurrentTime(options.mode)}
                  </Text>
                </View>
                <View style={styles.confirmBtn}>
                  <TouchableOpacity onPress={confirmHandle}>
                    <Text style={styles.confirmText}>确认</Text>
                  </TouchableOpacity>
                </View>
              </View>
              {/* 内容 */}
              <View style={styles.pickerBody}>
                {tempValue ? (
                  <DatePicker
                    style={styles.pickerStyle}
                    date={new Date(tempValue)}
                    mode={options.mode}
                    onDateChange={text => dateChangeHandle(text)}
                  />
                ) : (
                  <DatePicker
                    style={styles.pickerStyle}
                    date={new Date(getCurrentTime(options.mode))}
                    mode={options.mode}
                    onDateChange={text => dateChangeHandle(text)}
                  />
                )}
              </View>
            </View>
            <View style={{height: pxToDp(12)}}></View>
          </View>
        </View>
      </Modal>
    </>
  );
});
const styles = StyleSheet.create({
  pickerWrap: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    position: 'relative',
  },
  pickerBlock: {
    borderColor: '#dcdcdc',
    borderWidth: pxToDp(1),
    borderStyle: 'solid',
    borderBottomWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    width: '100%',
    height: pxToDp(270),
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#fff',
  },
  pickerContent: {
    width: '91.47%',
    marginLeft: '4.265%',
  },
  pickerHeader: {
    width: '100%',
    height: pxToDp(35),
    flexDirection: 'row',
    justifyContent: 'space-between',
    position: 'relative',
  },
  timeValue: {
    width: pxToDp(150),
    position: 'absolute',
    top: pxToDp(10),
    left: '28.13%',
    alignItems: 'center',
  },
  date: {
    color: '#333',
    fontSize: pxToDp(14),
    fontWeight: '400',
  },
  cancelBtn: {
    borderRadius: pxToDp(17),
    width: pxToDp(75),
    height: pxToDp(35),
    backgroundColor: '#f5f5f5',
    overflow: 'hidden',
  },
  cancelText: {
    color: '#666',
    fontSize: pxToDp(17),
    fontWeight: '400',
    width: pxToDp(75),
    height: pxToDp(35),
    lineHeight: pxToDp(35),
    textAlign: 'center',
  },
  confirmBtn: {
    borderRadius: pxToDp(17),
    width: pxToDp(75),
    height: pxToDp(35),
    backgroundColor: '#FF5B23',
    overflow: 'hidden',
  },
  confirmText: {
    color: '#fff',
    fontSize: pxToDp(17),
    fontWeight: '400',
    width: pxToDp(75),
    height: pxToDp(35),
    lineHeight: pxToDp(35),
    textAlign: 'center',
  },
  pickerBody: {
    width: '100%',
    marginTop: pxToDp(6),
  },
  pickerStyle: {
    width: pxToDp(343),
    backgroundColor: 'white',
    borderRadius: 10,
  },
});
export default PickerDateComponent;

